<template>
  <div class="dairyfarm">
    
    <el-row :gutter="10">
      <el-col :span="6" :offset="3">
        <el-button type="primary" plain @click="dialogAddCow = true">点击添加奶牛</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dialogCowOperate = true,getCows()">添加奶牛操作</el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" plain @click="dialogSentBucket = true,getCows()">点击发送奶桶</el-button>
      </el-col>
    </el-row>
    

    <el-dialog
            title="添加奶牛"
            :visible.sync="dialogAddCow"
            width="50%">

      <el-form
              status-icon
              :model="cow"
              ref="ruleForm2"
              class="demo-ruleForm">
        <el-form-item label="健康状况">
          <el-radio-group v-model="cow.healthy">
            <el-radio :label=true>健康</el-radio>
            <el-radio :label=false>非健康</el-radio>
          </el-radio-group>
        </el-form-item>

        <br>

        <el-form-item label="检疫情况">
          <el-radio-group v-model="cow.quarantine">
            <el-radio :label=true>通过</el-radio>
            <el-radio :label=false>未通过</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="食物来源">
          <el-input v-model="cow.feedSource" placeholder="食物来源"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddCow = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addCow()">确 定</el-button>
      </span>

    </el-dialog>

    <el-dialog
            title="添加奶牛操作"
            :visible.sync="dialogCowOperate"
            width="50%">

      <el-form
              status-icon
              :model="cowOperate"
              ref="ruleForm2"
              class="demo-ruleForm">


        <el-form-item label="奶牛编号">
          <el-select v-model="cowOperate.cowId" placeholder="请选择奶牛编号">
            <el-option
                    v-for="(item) in cowIds"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="操作种类">
          <el-radio-group v-model="cowOperate.operation">
            <el-radio :label="1">挤奶</el-radio>
            <el-radio :label="2">喂食</el-radio>
            <el-radio :label="3">检疫</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-input v-model="cowOperate.consumptionOrOutput" placeholder="备注信息" :disabled="cowOperate.operation === 1"></el-input>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCowOperate = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addCowOperate()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
            title="物流信息"
            :visible.sync="dialogSentBucket"
            width="50%">

      <el-form
              status-icon
              :model="cow"
              ref="ruleForm2"
              class="demo-ruleForm">


        <el-form-item label="奶桶编号">
          <el-select v-model="sentProcess.buckerId" placeholder="请选择奶桶编号">
            <el-option
                    v-for="(item) in bucketIds"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="加工厂编号">
          <el-input v-model="sentProcess.machiningId" placeholder="请输入发送到的加工厂ID，如：M001"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSentBucket = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="postSentProcess()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as cowAPI from '@/api/dairyfarm/';

export default {
  name: "DairyFarm",
  data() {
    return {
      dialogAddCow: false,
      dialogCowOperate: false,
      dialogSentBucket: false,
      loading: false,
      percentage: 0,
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#6f7ad3', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#5cb87a', percentage: 100}
      ],
      cow: {
        farmId: "F001",
        healthy: '',
        quarantine: '',
        feedSource: '',
        stutas: 1
      },
      cowIds: [],
      bucketIds: [],
      cowOperate: {
        cowId: '',
        operation: '',
        consumptionOrOutput: '',
      },
      sentProcess: {
        buckerId: '',
        machiningId: '',
      },
    };
  },
  methods: {
    // 获取奶牛场奶牛编号
    getCows() {
      cowAPI.get("F001").then((res) => {
        this.cowIds = res.F001.cowIds
        this.bucketIds = res.F001.bucketIds
      })
    },
    // 添加奶牛
    addCow() {
      this.loading = true
      console.log(this.loading)
      cowAPI.postAddCow(this.cow).then((res) =>{
        if (res.status > 0) {
          this.$notify.error({
            title: '添加失败',
            message: res.msg,
          })
        this.dialogAddCow = false 
        } else {
          this.$notify({
            title: '添加成功',
            message: res.data.id,
            type: 'success'
          })
          this.dialogAddCow = false 
        }
        this.loading = false
    }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogAddCow = false 
      })
    },
    // 添加奶牛操作
    addCowOperate() {
      this.loading = true
      if (this.cowOperate.operation === 1) {
        cowAPI.postAddCowMilking(this.cowOperate).then((res) =>{
          if (res.status > 0) {
            this.$notify.error({
              title: '挤奶失败',
              message: res.msg,
            })
            this.dialogCowOperate = false
          } else {
            this.$notify({
              title: '奶桶ID',
              message: res.data.id,
              type: 'success'
            })
            this.dialogCowOperate = false
          }
          this.loading = false
        }).catch((error) => {
          this.$notify.error({
            title: '网路错误，或者服务器宕机',
            message: error,
          })
          this.dialogCowOperate = false
        })
      } else {
        cowAPI.postAddCowOperate(this.cowOperate).then((res) =>{
          if (res.status > 0) {
            this.$notify.error({
              title: '操作失败',
              message: res.msg,
            })
            this.dialogCowOperate = false
          } else if (res.data.operation === 2){
            this.$notify({
              title: '喂食成功',
              message: '食物：' + res.data.consumptionOrOutput,
              type: 'success'
            })
            this.dialogCowOperate = false
          } else {
            this.$notify({
              title: '检疫成功',
              message: '检疫信息：' + res.data.consumptionOrOutput,
              type: 'success'
            })
            this.dialogCowOperate = false
          }
          this.loading = false
        }).catch((error) => {
          this.$notify.error({
            title: '网路错误，或者服务器宕机',
            message: error,
          })
          this.dialogCowOperate = false
        })
      }
    },
    // 物流
    postSentProcess() {
      this.loading = true
      cowAPI.postSentProcess(this.sentProcess).then((res) => {
        if (res.status > 0) {
          this.$notify.error({
            title: '发送失败',
            message: res.msg,
          })
          this.dialogSentBucket = false
        } else {
          this.$notify({
            title: '发送成功',
            message: res.msg,
            type: 'success'
          })
          this.dialogSentBucket = false
        }
        this.loading = false
      }).catch((error) => {
        this.$notify.error({
          title: '网路错误，或者服务器宕机',
          message: error,
        })
        this.dialogSentBucket = false
      })
    },
  },
  components: {
  },
};
</script>

<style scoped>

  .dairyfarm {
    margin-top: 20%;
  }

  /deep/ .el-button {
    font-size: 30px;
  }
</style>
